<template>
  <el-dialog :title="title" :modal="false" :visible.sync="open" center :close-on-click-modal="false"
    custom-class="fence-user-dialog" :before-close="handleClose">
    <div class="container">
      <div class="aside-left">
        <el-input class="search" placeholder="输入名称或号码" v-model="searchKey">
        </el-input>
        <el-scrollbar class="default-scrollbar" wrap-class="default-scrollbar__wrap">
          <el-tree :data="userTreeData" :filter-node-method="handleUserFilter" node-key="nid" highlight-current
            show-checkbox accordion ref="tree" :indent="getIndent()" :default-checked-keys='checkedKeys'
            @node-click="nodeClick" @check="check" @check-change='checkChange'></el-tree>
        </el-scrollbar>
      </div>
      <div class="aside-right">
        <div class="total"><span>选中用户: </span><span>{{userRow.length}}</span></div>
        <el-scrollbar class="right-scrollbar" wrap-class="right-scrollbar__wrap">
          <div class="user-item" v-for="(row, index) in userRow" :key="index" @click="deleteRow(index)">
            <div class="name">{{ row.userName }}</div>
            <div class="tel">{{ row.userTel }}</div>
          </div>
        </el-scrollbar>
        <div class="user-commit">
          <el-button @click="commit">确 定</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { selectDictLabel, guid } from '@/utils/microsys'

export default {
  props: {
    open: Boolean,
    formData: Object,
  },
  data() {
    return {
      title: '添加用户',
      userRow: [], // 选中用户
      telType: 'poc', // 号码类型 目前暂只有poc才可以加入电子围栏
      searchKey: '', // 查询关键字
      checkedKeys: [], // 默认选中
    }
  },
  computed: {
    ...mapGetters(['userTreeData', 'telEmployeeMap', 'id2nidMap']),
  },
  watch: {
    searchKey(val) {
      this.$refs.tree.filter(val)
    },
  },
  methods: {
    // 树结构间隔
    getIndent() {
      let width = document.body.clientWidth
      return (16 * width) / 1920
    },
    // 过滤
    handleUserFilter(searchKey, data) {
      return searchKey
        ? data.type === 'employee' &&
            data.obj.defaultNo &&
            this.telType.includes(data.obj.deviceType) &&
            (data.obj.defaultNo.includes(searchKey) ||
              data.label.includes(searchKey))
        : data.type === 'employee' &&
            data.obj.defaultNo &&
            this.telType.includes(data.obj.deviceType)
    },
    // 点击树节点
    nodeClick(data) {
      if (
        data.type === 'employee' &&
        data.obj.defaultNo &&
        this.telType.includes(data.obj.deviceType) &&
        this.userRow.findIndex(
          (item) => data.obj.employeeID === item.userID
        ) === -1
      ) {
        this.checkedKeys.push(data.nid)
        this.userRow.push({
          userID: data.obj.employeeID,
          userName: data.label,
          userTel: data.obj.defaultNo,
          nid: data.nid,
        })
      }
    },
    // 树节点选中状态改变
    checkChange(data, checked, leaf) {
      if (
        !checked &&
        data.type === 'employee' &&
        data.obj.defaultNo &&
        this.telType.includes(data.obj.deviceType)
      ) {
        let index = this.userRow.findIndex(
          (item) => data.obj.employeeID === item.userID
        )
        if (index !== -1) {
          this.deleteRow(index)
        }
      }
    },
    // 点击节点复选框
    check(data, treeObj) {
      let checkedKeys = treeObj.checkedKeys
      console.log('checkedKeys', checkedKeys)
      let rows = treeObj.checkedNodes.filter(
        (item) =>
          item.type === 'employee' &&
          item.obj.defaultNo &&
          this.telType.includes(item.obj.deviceType)
      )
      if (rows.length === 0) {
        this.userRow.forEach((item, index) => {
          if (item.nid) {
            this.$delete(this.userRow, index)
          }
        })
        return
      }
      rows.forEach((item) => {
        this.nodeClick(item)
      })
    },
    // 点击删除
    deleteRow(index) {
      let data = this.userRow[index]
      this.$delete(this.userRow, index)
      this.$refs.tree.setChecked(data.nid, false)
    },

    // 保存
    commit() {
      this.$emit('save', this.userRow)
      this.handleClose()
    },
    // 关闭弹出窗
    handleClose() {
      this.$emit('update:open', false)
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.tree.filter()
      this.formData.users.forEach((item) => {
        let nids = this.id2nidMap.get(item.userID)
        if (nids) {
          let nid = nids.find((n) => {
            let node = this.$refs.tree.getNode(n)
            if (node && node.data.type === 'employee') {
              item.nid = n
              return true
            }
          })
          if (nid) {
            this.userRow.push(item)
            this.$refs.tree.setChecked(nid, true)
          } else this.userRow.push(item)
        } else this.userRow.push(item)
      })
    })
  },
}
</script>

<style lang="scss" scoped>
@import '~@/assets/scss/fence_user.scss';
</style>
